Introduction
Toolset Overview
What's new / Release history
Getting Started
Browsing, Searching and Viewing
Editing icons and cursors
Microangelo Components
Explorer
Librarian
Studio
Animator
Additional References
Authoring topics
System Requirements
Keyboard Shortcuts
Sales, Service and Support

Special topics for Windows Vista


Toolset Overview

The Master's Tools

Microangelo® Toolset 6 provides a complete solution for all aspects of icon and cursor development. Its optimized components allow you to create, edit, browse, view, search and extract, replace icons, and much more. If you need a solution for anything related to Windows icons, Toolset 6 will likely do it easier than you expected, better than you expected, or both.

Support for Windows® Vista™

All Toolset components include complete support for the next generation of icons introduced in Windows Vista. Search and extract hi-res icons from inside Windows Vista and other program files with Microangelo Librarian. Create and edit Vista icons with or without PNG compression using Microangelo Studio. Use Toolset's command line options to automate the update or replacement of icons inside of program files and libraries.

Creating and editing images

Microangelo Toolset includes two image editors, Studio and Animator. Both offer a common, powerful development environment with additional features and options for their specific needs. A broad array of painting and editing tools are available, including an extremely proficient Gradient tool that creates outstanding blends of color and transparency.

Everything you need

Toolset 6 delivers capabilities to achieve your very best. Browse and explore icon and cursor files with immediate access to all of Toolset's features. Search and extract icons from entire disk drives to explore and compare your icon designs with others. View, edit, replace and manipulate icons and ALL of the images they include regardless of your Windows platform. (See System Requirements)

Software Developers - get ready for Vista!

Design and build Vista icons into your programs today! Toolset includes command line features to easily automate adding Vista icons to your programs as you build them. Microangelo's online Help provides the latest, up-to-date development details for Vista icons as they become available.


What's new in Toolset 6

Microangelo Toolset 6 provides complete support for the larger, compressed image formats introduced in Windows Vista. We've also added enhanced image scaling algorithms, rich gradient tools, improved performance, and reduced the number of clicks and keystrokes needed to get the job done.

A complete Release History of Toolset 6 is included at the end of this page. The following information describes the major new features introduced in Toolset 6:

Support for Windows Vista icons
Create and edit all images sizes and color formats, including the new 256x256 (hi-res) images for Vista.
Select PNG compression for any icon image format. (Windows Vista is currently the only Windows platform that recognizes PNG compressed icon images.)
Software Developers: Update applications (EXE, DLL, ...) with icon resources containing the new Vista image formats. Microangelo can do it for you "automatically" with Librarian's new command line replace option.**

Studio and Animator (Image editing)
Project Templates (Studio): Use Microangelo's pre-defined templates or create your own to track and streamline the creation of new image formats.
An extremely rich Gradient tool allows any area to be filled with custom blends of multiple colors and transparency levels.
Improved selection tools. Create rectangular, elliptical and irregular (lasso) selections. Copy and Paste between Studio, Animator, and Microangelo Creation.
New scaling and rendering options provide more control and superior results when resizing an imported or existing image. Microangelo's bicubic and "nearest neighbor" scaling methods, sharpen levels, and a 1-to4 zoom control assure you of the best result.
Enhanced painting with semi-transparent colors provides easier, more intuitive painting with blended colors and transparency.
Create alpha-blended, animated cursor (ANI) files for Windows XP and Vista.

Librarian
Scan entire folders or disk drives for icons with Librarian. Microangelo's intelligent file search logic can find and extract more icons from more files than any other icon utility.
Scanning with Librarian can locate thousands of icons and images. A new, "Display existing images only" option allows you to quickly view and access icons that contain a specific image format (i.e., 256x256 PNG compressed).
Librarian's workspace offers smoother, more intuitive results for all scrolling operations and for dragging/dropping icons within or between Librarian windows.

** Denotes features that require Windows 2000, Windows XP, or Windows Vista.

Microangelo Toolset 6 includes many "behind-the-scenes" improvements that add performance, simplify tasks and provide easier, quicker results. We hope you'll find that Microangelo can do more for you and do it better than any other software. Please let us know if it falls short of your expectations.

Thank you for choosing Microangelo!

Release History

Many of the changes and corrections listed below were the result of feedback from our users, who told us what they liked in Toolset 6 and also what they didn't like. If you have feedback on these or any other aspects of Toolset, please let us know!

The following information is presented in reverse chronological order beginning with the most recent release.

Version 6.0.3 (August 1, 2006)
New features and changes
- Added Color adjustments for Hue, Saturation, Lightness, Colorize, and Gray/Disabled to Toolset's icon and cursor editors.
- Microsoft-compatible mouse buttons for "explore back" and "explore forward" can be used to Undo and Redo editing operations.

Corrections
- Resolved low-memory problem when editing multiple, large icon resources between Librarian and Studio.

Version 6.0.2 (June 28, 2006)
New features and changes
- Relocated the Anti-alias and Opacity controls from the toolbar to a new Paint tab on the Paint Modifers tool window.
- Anti-alias and Opacity are no longer tracked on a per-tool basis. Their settings will remain the same when a different paint tool is selected.
- The Define Gradient dialog is now accessed by clicking the new Define Gradient button, located on the Paint tab of the Paint Modifers tool window. This button also displays the current gradient as it will be painted, including the current Opacity level when editing XP images.
- Major changes were made to the drawing of lines using the Anti-alias option. (Studio and Animator) New tables and computations are used to construct well-balanced, "one pixel" lines for the specific color and angle of the line.
- Added a new conversion tool to quickly convert images between 256 colors and True Color.
- Changed the Eyedropper tool to pick up the alpha (transparency) as well as the RGB values when editing XP images. This is consistent with previous versions. Also added an option to only pick up RGB when the CTRL key is pressed (the Opacity control level remains unchanged).
- Cleaned up the Tools menu. Removed the clutter of menu items for editing tools and moved the Color B in Selection options to the Select menu.
- Librarian no longer separates image formats based on PNG compression. For example, you can now view all 256x256 images in Specific viewing mode whether the images are compressed or not. Librarian will indicate "PNG" for image formats that are stored with compression.
- Added Process Duplicate Icons feature to Librarian. All icons in the current workspace are examined and compared. Librarian will offer the option to Remove or Select the duplicate icons it locates. (Processing Duplicate Icons)

Corrections
- Corrected problems that occurred when an icon was dragged and dropped from Librarian to Librarian using the right mouse button.
- Corrected bug in Animator that reset the cursor hot spot to (0,0) when opening a file.
- When "New Icon (Studio)" is selected from Librarian, Studio now displays the New Image Format dialog to begin the new icon.

Version 6.0.1 (May 15, 2006)
New features and changes
- Added new Select menu to Studio and Animator offering "All", "Deselect", "Reselect", and "Inverse" options. (Using selections)
- The Text tool now creates a selection while building text graphics. The selection can be "reselected" with the new Select menu option and used to create other text effects (such as Gradient filled text). (Text tool)
- To streamline creating new icon image formats, right-clicking an image format in Studio now provides options to create the next (lower) color depth and the next (smaller) size images. The choices are provided using the current Project Template. Choosing either selection will initialize the New Image Format dialog with the selected source and target images. (Image Formats)
- Changed Studio's file Open and Save dialogs to always initialize the file type to the type of resource being edited (ICO or CUR).
- Studio will now allow an icon or cursor to be saved with "blank" images. The user is informed and prompted to cancel or continue with the save operation.

Corrections
- Pasted selections can now be nudged, flipped or rotated before committing the paste operation.
- Filled ellipses created with the anti alias option will now anti-alias the inner edge (previously, only the outer edge was anti aliased).
- Corrected problem that did not allow painting of anti-aliased lines with Opacity set to zero percent (transparent).
- Corrected bad behavior where the current selection was cleared if the Delete key was pressed while using the Define Gradient dialog.
- Corrected crash in Studio when the Flood tool was clicked in an area that was already filled with the color as the paint color, but a different opacity. (XP image formats.)


Browsing, Searching, and Viewing

Microangelo's components offer a variety of ways to locate and access files containing icons and cursors. The Explorer, Librarian and Studio components work together to flexibly support access to these files at different levels.

Browse for icons and cursors
Find and extract icons
View icons in libraries, programs, and other files


Browsing for icons and cursors with Explorer

Microangelo Explorer helps you browse for icons and cursors by displaying only those files that contain what you're looking for. Its user interface was designed based upon Windows Explorer.

The folder pane on the left displays a tree view of all computers, drives and folders available on your computer. The viewing pane on the right displays the contents of the folder pane selection.

Click on the plus signs (+) in the folder pane to expand objects beneath.
Click on any network, computer, drive or folder in the folder pane to view its contents in the viewing pane.
Double-click on any network, computer, drive or folder in the viewing pane to view its contents.
Click on the Parent Folder toolbar button on the toolbar to move up one level.
Double-click on any file in the viewing pane to view its complete contents with Microangelo Librarian, Studio, or Animator.


Finding and extracting icons
Microangelo Librarian can search entire folders or disk drives for icons and extract the icons it finds into a new workspace.

Searching a drive or folder

  1. Select Search Files from Librarian's File menu.

  2. Use the Search Drive or Folder dialog to select where to begin the search. Librarian will begin searching the files and folders that are displayed in the dialog's main window.

  3. Select the Include Subfolders checkbox to extend the search to folders underneath the current location.

  4. Select Search. Librarian will begin scanning and extracting the icons it locates into a new, untitled workspace.

Searching multiple drives or folders

Microangelo Explorer works together with Librarian to easily scan and open all icons on disk drives and in folders. Simply drag and drop the drives or folders from Explorer’s viewing window into Librarian to initiate the scanning process.

  1. Open Microangelo Explorer.

  2. Click the Librarian toolbar button in Explorer to launch Microangelo Librarian.

  3. If necessary, position the Explorer and Librarian windows to allow the drag and drop.

  4. Select one or more drives or folders in Explorer’s viewing windows, then drag and drop them into Librarian’s window.

Related Topics

Processing duplicate icons

Copying icons to ICO files


Viewing icons in libraries and other files

Use Microangelo Librarian to view icons embedded in program files and icon libraries.

To view icons in libraries and programs:

  1. Open Microangelo Explorer.

  2. Select Icon Libraries or Program Files using the drop-down Display control In Explorer's toolbar.

  3. Using the left window panel of Explorer, navigate to and select the computer, drive, or folder you want to browse.

  4. Double-click on the file to open it for viewing in Librarian.

-or-

  1. Open Microangelo Librarian.

  2. From the File menu select Open.

  3. In the Files of type drop-down control, choose Icon Libraries or Program Files.

  4. Choose the file you want to view and then select the Open.

To view Icon Resources (ICO):

  1. Open Microangelo Explorer.

  2. In the toolbar, select the Display drop-down, and set it to Icon Resources.

  3. Using the left window panel of Explorer, navigate to and select the computer, drive, or folder you want to browse.

  4. Double-click on the file to open it for viewing in Librarian.

-or-

  1. Open Microangelo Librarian.

  2. From the File menu select Open.

  3. In the Files of type drop-down control, choose Icon Resources.

  4. Select the file(s) and click the Open button.


Editing Icons and Cursors

Microangelo includes two image editors, Studio and Animator. Each is used to create and edit individual icons and cursors.

Static icons and cursors

Microangelo Studio is designed to create and edit static icon and cursors resources (ICO and CUR). The Studio program overview includes a complete list of topic links describing its tools and features.

Studio also works together with Microangelo Librarian to edit icons inside of icon libraries and program files. See Editing icons in libraries and programs to learn more.

Animated icons and cursors

Use Microangelo Animator to create and edit animated icons and cursors (ANI). Animator provides the same user interface and tools as Microangelo Studio with additional features designed to construct animations. Please refer to the Animator program overview for a description of the animation-specific features offered by Animator.


Explorer overview

Use Microangelo Explorer to:

Serve as a "home base" for launching Toolset components.
Browse networks, computers, drives and folders for icons and cursors.
Launch files in Librarian, Studio or Animator to drill deeper into their contents.

Working with Explorer

Start here (go anywhere)
Browsing for icon and cursor files
Accessing files with Librarian, Studio or Animator


Start here (go anywhere)

Microangelo Explorer provides information and access to all file formats that contain icons and cursors. All of Toolset's components are easilly launched from Explorer's toolbar and file view.

Explorer Basics

Microangelo Explorer looks and works very similar to Windows Explorer. The left window pane offers an expandable list of all objects, drives and folders underneath the Desktop. Making a selection in the left window pane displays the contents of the selection in the right pane.

Toolbar controls
Explorer's toolbar includes controls for navigating folders, launching Toolset components, and customizing the file view contents and viewing mode.

Parent Folder: Moves to the folder above the current location.
Folder Pane: Toggles the display of the left folder pane on and off.
Launch Microangelo Librarian.
Launch Microangelo Studio.
Launch Microangelo Animator.
View mode: Select details, large icons, small icons or list view.

The drop-down Display control is used to filter the file types that Explorer examines as it searches. See Browsing for icons and cursors for more information on using the Display control.

Related Topics

Browsing for icons and cursors

Accessing files with Librarian, Studio or Animator


Browsing for icon and cursor files

The following features are designed to help narrow your search and learn more about the contents of the files that you browse.

The Display filter

Explorer expedites browsing by filtering the display of files in the right window pane to the types of files you want to explore. Use the Display control on Explorer's toolbar to select the types of files to browse.

The following table indicates the file types each filter includes:

Setting | File types scanned
Icon Files | Icon Resource, Icon Library, and Program Files
Icon Resources | ICO
Icon Libraries | ICL
Program Files | EXE, DLL, CPL, OCX, SCR
Cursor Files | ANI, CUR
Static Cursors | CUR
Animated Cursors | ANI

The View mode

Explorer provides common viewing modes for the files and folders displayed in the right pane.

Select the Details view to view more information about each file, including the number of icons included in libraries and program files. Explorer displays columns for the file type and number of objects contained in each file.

Click a column heading to sort on that value. Click a second time to reverse the sort order. The following capture shows a detail view of the System32 folder of Windows Vista, filter set to find all icons files, view sorted on Objects.

Related Topics

Accessing files with Librarian, Studio or Animator


Accessing files with Toolset components

Microangelo Explorer offers a variety of methods to launch files into Toolset components.

Quick Launch

Double-click any file in the right pane of Explorer to access the file contents with a Toolset component.

Double-click | Open file in
ICL, EXE, DLL, OCX, CPL, or SCR | Microangelo Librarian
ICO or CUR | Microangelo Studio (editor)
ANI | Microangelo Animator (editor)

Drag and Drop

All Toolset components will accept files dragged from Microangelo Explorer and dropped into their main windows.

Open a Library or Program file
Drag an icon library or program file from Explorer and drop it into a Librarian window to access the icons inside.

Scan and Extract
Drag and drop entire disk drives and folders from Explorer into a Librarian window to initiate a Search and Extract on the files they contain. You can select and drag multiple drives or folders, even from a network, to define the scope of the Search and Extract that Librarian will perform.

Open in an editor
Drag an icon or cursor file from Explorer and drop it into the main window of Studio or Animator to open the file in the appropriate editor.

Related Topics

Browsing for icons and cursors


Librarian overview

Microangelo Librarian accesses icons inside of icon libraries and many types of program files. Use Librarian to:

Create icon libraries, and access and organize the icons they contain.
View icons. Librarian provides four viewing modes - Desktop, Windows, Raw and Specific, to let you see exactly what you're looking for.
Search entire folders or disk drives for icons and extract them into a new workspace.
Edit or replace icons in program files.

Working with Librarian

Opening a file
Viewing modes
Organizing icon libraries
Copying icons to ICO files
Finding and extracting icons
Processing duplicate icons
Editing icons in libraries and programs
Replacing icons in libraries and programs

(includes command line options for developers!)


Opening a file in Librarian

  1. Select Open from Librarian's File menu.

  2. Set the Files of type control for the type of file being opened. The Icon Files setting includes all of the file types that Librarian processes.

  3. Use the Open File dialog controls to locate and select the file.

  4. Select Open.

Appears on the left side of the status bar when all operations are permitted in the workspace.
Appears when operations are limited. For example, icons cannot be added or removed from program files. Image formats can only be added or removed inside of program files when running under Windows 2000, XP, or Vista.

Related Topics

Viewing modes

Finding and extracting icons


Librarian Viewing Modes
Desktop mode displays Windows "large" icon as it would appear on the current computer's desktop.
Windows mode displays both large and small icons, as they would appear on the current computer.
Raw mode displays all image formats included in each icon.

Specific mode displays images that match the format selected in the toolbar's Image Format control.

Tip

In Specific mode, select the Display existing images only option to limit the images displayed to the icons that contain the Image Format selection.

Related Topics

Opening a file


Organizing Icon Libraries

Icon libraries offer a flexible way for icon enthusiasts and software developers to organize and access icons and the projects they support. Librarian provides features for organizing icons within and between libraries.

Arranging icons in libraries

Adding icons to libraries

Removing icons from libraries

Removing specific image formats


Arranging icons in a library

Sorting the display of images

Select Sort by Name or Sort by Image Count from Librarian's View menu to sort the display of icons either alphabetically or by the number of images they contain.

Changing the order of icons inside a library

To arrange the actual order that the icons are saved in the library, select Unsorted from Librarian's View menu. This option displays the icons in the order they are found in the icon library. One or more icons can then be selected, dragged and dropped to rearrange the order inside of the library.

This can be done in all viewing modes except Raw view.

  1. Important! Begin by selecting Unsorted from Librarian's View menu.

  2. Drag and drop icons inside of Librarian's workspace with the left mouse button to arrange them into the desired order.

  3. Select Save from Librarian's File menu to save the icon library with the new order of icons.

Related Topics

Adding icons to libraries

Removing icons from libraries

Removing specific image formats


Adding icons to libraries

Icons are easily added to Librarian's current workspace by dragging them from:

Another Librarian window
Microangelo Explorer
Windows Explorer
Any open folder

Tip

Select New Window from Librarian's File menu if you want to drag icons from other libraries or program files. This will open a new Librarian window and position both windows for the drag and drop operations.

Related Topics

Removing icons from libraries

Removing specific image formats

Arranging icons in libraries


Removing icons from libraries

  1. Select the icon(s) to be deleted.

  2. Select Delete from Librarian's Edit menu or press the keyboard Delete key.

Tip

Multiple icons can be selected for this action.

  • Depress the left button down outside of an icon and then drag to select a rectangular area within the workspace.

    • -or-

  • Hold down the CTRL key while left clicking on an icon to add it or remove it from the current selection.

Related Topics

Removing specific image formats

Adding icons to libraries

Arranging icons in libraries


Removing image formats from libraries

Removing a specific image format

Microangelo Librarian can remove specific image formats from one or more icons in an icon library.

  1. Select Specific from Librarian's View menu.

  2. Select the image format to be removed using the Image Format control on Librarian's toolbar.

  3. Select the icon(s) the current format will be deleted from.

  4. Select Delete Format from Librarian's Edit menu.

Tip

Multiple icons can be selected for this action.

  • Depress the left button down outside of an icon and then drag to select a rectangular area within the workspace.

    • -or-

  • Hold down the CTRL key while left clicking on an icon to add it or remove it from the current selection.

Related Topics

Removing icons from libraries

Adding icons to libraries

Arranging icons in libraries


Copying icons to ICO files
To save a single icon to an ICO file, right-click on the icon inside of Librarian's workspace and select Save as ICO.
Easily save one or more icons to ICO files by selecting and dragging them outside of Librarian. Drop them anywhere just as you would a normal file - into a folder, a Windows Explorer window, your desktop, etc...

Related Topics

Finding and extracting icons


Processing duplicate icons
Microangelo Librarian can examine the icons in the current workspace, identify duplicate icons, and offer the choice to Remove or Select the duplicates it finds.

  1. Select Process Duplicate icons from Librarian's Edit menu.

  2. Select Scan to begin examining the workspace for duplicates.

  3. If Librarian locates any duplicates, choose Remove to delete the duplicates from the workspace, or choose Select to select the duplicate icons.

Related Topics

Finding and extracting icons


Editing icons inside of files

Editing icons in libraries and programs
Librarian works together with Microangelo Studio to allow you to edit icons inside of icon libraries or program files.

  1. Select Open from Librarian's File menu. Open the file that contains the icon you want to edit.

  2. If the file being opened is a program file, Librarian will ask you for the access mode. Choose the Basic or Advanced mode and select Continue.

  3. Double-click on an icon to edit. Librarian will open an edit session with Microangelo Studio. You can now edit the images inside of the icon using Studio.

  4. When complete, select Update Librarian and Exit from Studio's File menu to return the updated icon to Librarian and close the edit session.

  5. Select Save from Librarian's File menu to update the file.

Related Topics

Program File Access Modes

Microangelo Studio Overview


Replacing icons in libraries and programs

Replacing icons in Librarian's workspace

Librarian provides Replace icon and Replace icon images options to easily change these objects within program files.

  1. Select Open from Librarian's File menu.

  2. Set the Files of type option to Program Files.

  3. Open the program file.

  4. Librarian will prompt you for Program File Access options.

  5. Right-click on the icon to be replaced. Select Replace icon images (Basic mode) or Replace icon (Advanced mode).

  6. Use the Select Replacement Icon dialog to locate and open the new icon.

  7. When complete, select Save from the File menu to update the program file.

Please refer to Program File Access options for information on the capabilities offered by the Basic and Advanced update modes.

Automated replacement with command line options

Automate the replacement of library and program file icons using Librarian's command line replacement feature.

Syntax:
m6librarian.exe -r[a/b:(index)] targetfile sourceicon

Options:
-r | Required. Indicates command line replacement mode.
a/b | Required. Use 'a' for Advanced icon replacement, or 'b' for Basic image replacement. (see Program File Access options for a description of update modes.)
index | Optional. Enter the zero-based index of the icon to replace in the target file. The default index is zero.
targetfile | Required. The filename of the icon library or program being updated.
sourcefile | Required. The filename of the replacement icon (ICO).

Output
Once Librarian detects the '-r' command line option, it directs all output to the standard text output stream.

Software developers: The "post-build" step
At Eclipsit, we use Microangelo Librarian to update the program icons in all Toolset components during the "Release" build. The following example shows how Librarian can be called from Visual Studio 2005 as a Post-build step of the build process.

In Visual Studio, select the Properties option for the desired project. On the Property Pages dialog, expand/navigate to the Post-Build Event option:

Enter the command line for the post build step:

Example command lines:

1) m6librarian.exe -r[a] C:\Release\MyProg.exe C:\Release\MyProg.ico

2) m6librarian.exe -r[b:2] C:\Release\MyProg.exe C:\Icons\MyProg2.ico

The examples above have been simplified for brevity. Use quotation marks for all paths on the command line to specify complete pathnames.

 "C:\Program Files\Microangelo\Toolset 6\m6librarian.exe"


Studio overview

Use Studio to create and edit icons or cursors for Microsoft Windows and Windows programs. Studio can also edit icons inside of icon libraries and program files with Microangelo Librarian.

Important: If you are not familiar with the multiple image formats that icons and cursors require, please review the Icon and Cursor Requirements topic before proceeding.

Working with Studio

Setting preferences
Project templates
Image formats
Colors and palettes
Paint tools and options
Texture Grid and Edit Modes
Opening and importing
Saving and exporting
Using the clipboard
Setting a cursor's Hot Spot
Screen capture


Program Preferences

Setting Preferences

The Preferences dialog is used to customize program features and actions. The dialog's tabs provide the ability to tailor features in four different areas.

Select Preferences from Studio's File menu to open the Preferences dialog box.

General

The format that Studio uses to display RGB information and the action the Undo Pencil command performs can be changed using the General tab.

Transparency

The manner that Studio displays transparent areas in the main edit area and the Preview window can be customized using the Transparency tab.

Message Alerts

Some of the warning messages displayed by Studio and Animator can be toggled on or off using the Message Alerts tab.


Studio Project Templates

Project Templates provide the convenience of anticipating the image formats you will create and the order you prefer to create them. They do not place any limitations on your project or the image formats you choose to use.

For example, many artists prefer to begin with the largest, richest color image format. That image is then used to (1) begin the next lower color depth of the same size and also (2) scale down to the next smaller size in the same color depth. The templates installed with Studio follow this pattern.

Installed Templates

Toolset Setup installs three pre-defined project templates for Microangelo Studio. Studio also provides a special "My Computer" template that includes only the image formats required by the current computer. The pre-defined templates are:

Template | Provides image formats to support
Win95-Win2K | Windows 95, Windows 98, Windows ME, and Windows 2000.
Win95-WinXP | Windows 95, Windows 98, Windows ME, Windows 2000, and Windows XP.
Win2K-WinVista | Windows 2000, Windows XP, and Windows Vista.

Project Templates dialog

The Project Templates dialog can be opened from Studio's File menu and also from the New Image Format dialog.

Setting the current project template

  1. Select the desired project from the list of Templates.

  2. Select Set Current.

  3. Select Apply or OK.

Editing a project template

Begin by selecting the project template you want to edit from the list of Templates.

  • Click the Add button to add a new image format to the list.

  • Select a format in the list of images and click Up or Down to change the order in the list.

  • Select an image format in the list and use the Remove button to remove it from the list.

  • Select one of the two Hi-color options to set the project hi-color preference to either 256-color (fixed palette) or True Color (unlimited palette).

  • Select Apply or OK.

Tip

It is much easier to edit hi-color images in True Color than 256 colors. True Color offers an unlimited palette of colors to support smooth, anti-aliased edges and rich gradients. If your project requires 256 color images, you can easily convert True Color formats to 256 colors when you're ready to publish your final work. Do NOT include 256 and True Color images of the same size. Icons should only contain a 256 color or a True Color format for each image size.

Related Topics

Icon and Cursor Requirements

Image formats


Image Formats

Working with image formats

Studio displays the existing image formats of an icon or cursor in a listbox on the right side of the main window.

  • Click an image with the left mouse button to select the image for editing.

  • Click an image with the right mouse button to display a popup menu of selections for the image.

Remove format | Removes the image format from the current resource.
New format | Creates a new image format based on the clicked format. Studio offers the next lower color depth and next smaller size formats in the current Project Template.
Convert format | Quickly converts True Color images to 256 colors and vice-versa.
Compression | Add or remove PNG image compression to images larger than 72 pixels.

Converting hi-color image formats

Studio provides quick conversion between True Color and 256 color formats. We recommend editing and maintaining hi-color image formats in the True Color format. If your project requires 256 color formats, this feature allows you to easily convert to 256 colors before you publish your final design.

  1. Right-click on any 256 or True Color image in the list of formats. Studio will offer conversion to True Color for 256 color formats, or conversion to 256 colors for True Color formats.

  2. Select the Convert to... menu option to perform the conversion.

Removing image formats

Click the Remove Image Format to remove the current image format.

Creating new image formats

Studio displays the New Image Format dialog when you begin a new icon or cursor. The dialog can be opened from Studio's Tools menu or by clicking the New Image Format tool button.

New Image Format dialog

This dialog provides controls used to select the new image format and to optionally prefill the new image using an existing image format or an imported graphic file.

Format

This drop down control includes all of the image formats in the current project template. Non-existing images are displayed in bold and the next available (non-existing) image format is selected.

Use manual controls

Select this checkbox to add an image format that is not included in the current project template. Additional manual controls are presented at the bottom of the dialog:

Project templates

Select this button to change or edit the current project template.

Prefill Image

Studio can prefill the new image format using an existing image format or by importing a PSD, PNG, JPG or BMP graphic file.

Existing Images

Select an image from this drop-down control to prefill using an existing image format.

Import

Select Import to prefill the new image using a PSD, PNG, JPG or BMP graphic file.

Target Image

Use this area to view and adjust the prefill results.

Resample

This option is available when the prefill source image must be scaled to fit the new image size. Choose either Bi-cubic or Nearest Neighbor to compare and select the better result.

Sharpen

This option is also available when the source image must be scaled. Six levels of sharpen are available - 0 for no sharpen and 6 for maximum sharpen.

View

The View option provides magnified viewing of the prefilll results when the target image is 128x128 pixels or smaller. Select 100, 200, 300, or 400 per cent depending on the target size.

Related Topics

Project Templates

Image Compression

Icon and Cursor Requirements


Colors and palettes

The following information describes how colors and palettes are used in Microangelo Studio and Animator.

A and B Colors

Microangelo's editing tools make use of two colors, Color A and Color B. The current A and B colors are displayed above the drawing tools on left side of the edit area. See Color A and B usage for more information on how these selections are used for different operations.

Color Palettes

Studio and Animator provide colors and options in the Palette window appropriate for the color depth of the image being edited:

16 colors | 256 colors | True Color/XP

Selecting Colors for Drawing and Editing

Select the colors used for Color A or Color B by clicking the left or right mouse button over the inkwell containing the desired color. Click the left mouse button to select Color A or the right mouse button to select Color B.

Transparent and Inverse Colors

The Palette window also includes two special inkwells containing transparent and inverse ink except when editing XP images. These selections can be used to create transparent and inverse effects when the images are displayed. To paint transparently when editing XP images, select the Zero Opacity tool button in Studio's toolbar.

Saving/Opening Color Palettes

Color palettes can be saved to disk and/or opened when editing images with 256 colors or more. Click the "down" arrow button at the top of the Palette window to open the Palette menu.

NOTE: Changing the color palette of a 256-color image will also change the colors of the image content. Decide on a color palette for 256-color images BEFORE adding content to the image.

Sorting Color Palettes

Palette colors can optionally be sorted by Hue, Lightness, or Saturation. Click the "down" arrow button at the top of the Palette window to open the Palette menu.

Blending New Colors

A Color Blend area is included at the bottom of the Palette Window when editing True Color (RGB) or XP (RGBA) images. Click in either of the two blending funnels to pour Color A (left button) or Color B (right button) into the Color Blend area.

You can replace colors in the color palette with custom blend colors by simply dragging colors from the blend ink wells and dropping them into ink wells in the color palette above.

NOTE: Replacing a palette color when editing a 256-color image format will also change the color of any pixels using the previous palette color.

Related Topics

Color A and B usage

Paint tools and options


Paint tools and options

Studio and Animator provide a common set of paint tools and options. The paint toolbox includes selection, drawing, painting, and color tools. The behavior of the painting tools can be customized to include a variety of options such as dodge/burn, smooth edges (anti-alias), dithering and opacity.

Painting and Editing

The Paint toolbox
Learn how to use Toolset's selection, painting and color tools.

Filling a selection
Fill rectangular, elliptical or irregular selections with color or transparency.

Anti-alias and Opacity options
Create smooth edges with paint tools and apply "semi-transparent" color.

Color adjustments
- Change the Hue, Saturation, and Lightness of an image or selection.
- Colorize an image or selection.
- Create a gray/disabled version of an image.

Dodge and Burn
Darken and lighten areas of images using paint tools.

Two-color dithering
Painting "every-other-pixel" with paint tools.

Nudge, Flip, and Rotate
Manipulating the image or selection by one pixel, reversing or rotating.

XP Drop Shadow
Automatically create an XP-style "drop shadow" for RGBA image formats.

Related Topics

Colors and palettes


Rectangular selection tool
  • Press and hold down the button to display the menu of selection tools and choose the Rectangular Select tool.

  • Move the cursor into the edit area. Press the left mouse button in any corner of the area to begin the selection.
  • Drag the mouse to the opposite corner of the area and release the mouse button to complete the selection.
  • Once complete, the selection frame can be moved by clicking and dragging the left mouse button inside any part of the selection.


Elliptical selection tool
  • Press and hold down the button to display the menu of selection tools and choose the Elliptical Select tool.

  • Move the cursor into the edit area. Press the left mouse button in any corner of the area to begin the selection.
  • Drag the mouse to the opposite corner of the area and release the mouse button to complete the selection.
  • Once complete, the selection frame can be moved by clicking and dragging the left mouse button inside any part of the selection.


Lasso selection tool

The lasso tool is used to make an irregular selection. The tool is used to define points along the outside edge of the selection.

  • Press and hold down the button to display the menu of selection tools and select the Lasso tool.

  • Move the cursor into the edit area. Click the left mouse button over any pixel to create an anchor point and begin the lasso selection.
  • Continue moving the mouse and clicking the left button to create anchor points around the pixels to be selected.
  • Click the mouse over the starting point to complete the selection. (A green circle will flash in the cursor when the cursor is over the starting point).
  • Once complete, the selection frame can be moved by clicking and dragging the left mouse button inside any part of the selection.
  • Press the DEL key to remove the most recent anchor point.
  • Press the ESC key to abort the lasso selection.

TIP: Press the ENTER key to automatically close (complete) a lasso selection.

Using the Lasso tool:


Pencil tool

Select the Pencil tool to paint individual pixels.
Painting:
Click and drag the mouse in an edit window to apply color. Use the left mouse button to apply the foreground color or click the right mouse button to apply the background color.

Tip

Press and hold the Shift key after pressing the mouse button to restrict the Pencil tool to a horizontal or vertical direction.


Line tool

The Line tool paints straight lines one pixel wide. Preparing:
 | Select the Line tool.
Painting:
 | Click the mouse button over one endpoint of the line. Drag the mouse to the opposite endpoint. Use the left mouse button to apply the foreground color or click the right mouse button to apply the background color.

Tip

Press and hold the Shift key after pressing the mouse button to restrict the Line tool to 45 degree increments.


Brush tool

Select the Brush tool to paint pixel areas. Click and hold the Brush tool button to access the menu of brush shapes and sizes. Click on the desired brush shape/size.

Menu Options

The top row of the menu includes four brush shapes. The rows below offer a range of brush sizes.

Painting

Click and drag the mouse in an edit window to apply color. Use the left mouse button to apply the foreground color or click the right mouse button to apply the background color.

Tip

Press and hold the Shift key after pressing the mouse button to restrict the Brush tool to a horizontal or vertical direction.


Gradient tool

The Gradient tool is used to fill areas with gradual changes of color and/or transparency. It is a very powerful drawing tool that can be tailored for many different results.

The following example illustrates painting a radiating gradient inside of a selection to paint the front cover of a folder icon.

Preparing

  1. Press and hold down the Gradient tool button to display the gradient menu. Select the Radiate gradient option.

  2. The Paint tab on the Paint Modifiers tool window now displays the Define Gradient button with the current gradient. Click the Define Gradient button to access the Define Gradient dialog.

  3. Use the Define Gradient dialog to Load the Foreground-to-Background gradient definition.

  4. Set Color A (foreground) and Color B (background) colors to the desired beginning and ending colors of the gradient. In this example, we'll set Color A to the lighter shade of yellow at the top edge of the folder and Color B to the darker shade at the bottom edge.

Painting

The Gradient tool requires a current selection to define the boundary of the gradient paint. Painting without a selection will fill the entire image area.

  1. Begin by creating a selection to define the boundary where the gradient will paint. In this example, we used the Lasso selection tool to create an outline for the folder cover.

  2. Select the Gradient tool. Position the drawing cursor in the edit window at the upper left corner of the selection (the beginning of the "radiate" gradient).

  3. Press the left mouse button down to begin the gradient and then move the cursor down to the lower right corner of the selection.

  4. Release the mouse button to paint the gradient.

    5. As you can see, gradients add depth and photo-realism to your icons, and creating gradients is easy with Microangelo!


Color Eraser tool

Select the Color Eraser tool to erase a specific color, replacing it with another color.

Select an eraser size by pressing and holding the Color Eraser tool button to access different sizes.

Painting

Click and drag the mouse in an edit window to replace color. Use the left mouse button to replace Color A with Color B or the right button to replace Color B with Color A.


Shape tool

The Shape paint tool is used to draw rectangular or elliptical shapes.

Preparing

Select the Shape tool to draw rectangles or ellipses. Click and hold the Shape tool button to access the menu of shape options.

  • Select the Rectangle or Ellipse options to create outlined shapes.
  • Select "Filled" shapes to create outlined shapes filled with color. Use the left or right mouse button to outline/fill with colors A and B.
  • Solid Rectangle and Ellipse options draw filled shapes.

Painting

  • Move the cursor into an edit window. Press the left mouse button in any corner of the area the shape will occupy.
  • Drag the mouse to the opposite corner of the area and release the mouse button to complete the shape.
TIP: Press and hold the Shift key after pressing the mouse button to restrict the Shape tool to perfect squares and circles.


Text tool

The Text tool is used to draw text with the desired font and attributes.
Preparing:
  • Select the Text tool from the Paint toolbox.

The Add Text tool window appears:

Painting:
  • Enter the text to create in the edit area of the Font tool window.
  • Click the Font button to access the Font dialog and select a new font, type or size.
  • Click and drag the text in the edit window to move it to the desired location.

Related Topics

Using Selections


Eyedropper tool

The Eyedropper is used to pick up colors from pixels in the editing area. Press the left mouse button to load Color A or the right button to load Color B when the Eyedropper cursor is displayed.

Using the Eyedropper tool:

  1. Click on the Eyedropper tool button.

  2. Place the eyedropper cursor over any pixel in the edit area. Click the left mouse button to load the pixel color into Color A, or the right mouse button to load Color B.

The Eyedropper will return to the previous tool after a color is selected.

NOTE: The Eyedropper tool will only pick up the RGB values of the pixel. Press and hold the CTRL key when editing XP images to load the transparency (alpha) value as well.

Tip

Press and hold the SHIFT key while any drawing tool is over the edit area to "quick switch" to the Eyedropper tool and load a color from a pixel. When editing XP images, you can press and hold SHIFT+CTRL to load the transparency of a pixel as well as the color.


Color Locator

The Color Locator is used to locate colors in the editing area and the Palette window. Click on the Color Locator tool button and then click over any pixel in the editing area or any inkwell in the Palette window. All pixels in the editing area that match the color will momentarily blink. If the exact color is also present in the Palette window, the edges of the inkwell containing the color will blink.

Related Topics

Eyedropper

Color A and B usage


Filling a selection

The Fill option on Studio's Edit menu is used to flood a selected area with color or transparency. The Fill option can only be used on new selections (i.e., not a selection that has content in it following a Paste or move operation.)

  1. Select the color of ink for the fill into Color A or Color B.

  2. Use the rectangular, elliptical or lasso selection tool to define the area to be filled.

  3. When editing XP images, use the Opacity toolbar control to select the opacity of the fill operation.

  4. Select Fill from the Edit menu. Choose Color A or Color B and select OK to complete the fill.

Related Topics

Anti-alias and Opacity options

The Paint toolbox


Anti-alias and Opacity

Anti-alias and Opacity options

Anti-alias and Opacity controls are located on the Paint Modifiers tool window. Select Paint Modifiers from Studio's View menu to toggle the display of the Paint Modifiers window.

Anti-Alias

This option adds smooth edges to the paint result for the Pencil, Line, Brush, Flood, Shape and Text tools.

Limitations

Anti-aliasing requires an unlimited palette of colors and therefore is only available when editing images in True Color or XP color depth.
When editing True Color images, the anti-alias option can only smooth edges adjacent to other colors. True Color only offers one level of transparency (complete), therefore it is not possible to smooth an edge against transparent pixels.

Opacity

The Opacity control is available when editing XP image formats. The XP color depth is the only depth that supports a range of semi-transparent values, often referred to as RGBA or "alpha blended" format.

Changing Opacity
Enter a new Opacity value directly into the numeric edit control, or click the right arrow to adjust the level with the slider control.

Transparent Painting in XP color depth
Semi-transparent painting is normally blended with the colors of existing pixels. One exception is when the Opacity is set to zero. All painting tools will paint transparently - they will remove any existing color - when the Opacity level is set to zero. A special "Zero Opacity" tool button is available to easily toggle between the current opacity setting and zero opacity.

Related Topics

The Paint toolbox

Filling a selection


Color Adjustments

Color adjustments are available when editing XP or True Color image formats. Lower color depths cannot provide an unlimited range of colors to support these features.

Select Color from the Edit menu to access the following options:

  • Hue, Sat: Adjust Hue, Saturation and Lightness

  • Colorize: Control Hue, Saturation and Lightness.

  • Gray/Disabled: Convert a color image to a grayed/disabled image.

Hue, Saturation and Lightness

This option allows you to adjust the color of an image or selection with the following controls:

Hue:
Adjusts the Hue (color) of pixels by equal amounts.

Saturation:
Adjusts the intensity of color between zero (grayscale) and 100 (fully saturated).

Lightness:
Adjusts the relative brightness of all pixels.
Example:
The images at the right show some of the variations that can be created using HSL color adjustments.
Original Hue = -130
Sat = -10
Light = -10 		Hue = -180
Sat = 20
Light = 0 		Hue = 60
Sat = -20
Light = -10

Colorize

The Colorize option works best with mono-chromatic images where pixels are grayscale or blends of a particular color. Control the color and adjustments with the following options:

Hue:
Renders the image area with the selected the Hue (color).

Saturation:
Adjusts the intensity of color between zero (grayscale) and 100 (fully saturated).

Lightness:
Adjusts the relative brightness of all pixels.
Example:
We begin with a grayscale version of Animator's icon (see below). These images show several variations created using the Colorize option.
Original Hue = 40
Sat = 50
Light = 0 		Hue = 195
Sat = 25
Light = 0 		Hue = 360
Sat = -25
Light = 0

Grayscale / Disabled

This option quickly renders a disabled version of the image in either a grayscale or "knockout" version.

Grayscale:
Removes all color to create a grayscale version of the image.

Knockout:
Creates a disabled version of the image similar to that used by Windows toolbars.
Example:
The images at the right illustrate the results of the grayscale and knockout results as applied to Toolset's Studio icon.
Original Grayscale Knockout


Dodge and Burn

In addition to applying color, most Paint tools can also be used to darken (dodge) or lighten (burn) the colors of existing pixels.

Select Paint Modifiers from the View menu to access the Dodge and Burn control tab.

Dodge and Burn settings are used when painting with the Pencil, Line, Brush, Flood, Shape, and Text tools.

Related Topics

The Paint toolbox


Two-color dithering

Select Dither/Dodge/Burn from the View menu to access the Dither control tab.

Dither settings are used when painting with the Pencil, Line, Brush, Flood, Color Eraser, Shape, and Text tools.

Dither example: Color Eraser tool

Related Topics

The Paint toolbox

Anti-alias and Opacity options


Nudge/Flip/Rotate

Nudge, Flip, and Rotate

Toolbar buttons provide the ability to nudge, flip or rotate a selection or the entire image.

Nudge
Nudge buttons move the image or selection one pixel at a time.

Flip
Two "flip" buttons allow the image or selection to be reversed horizontally or vertically.

Rotate
This tool button displays the Rotate Image Area dialog to rotate the image or selection in increments of 90 degrees.


XP Drop Shadow

Studio provides an option to add a Windows XP style drop shadow when editing RGBA images. The drop shadow meets Microsoft's light angle and intensity specifications for Windows XP icons.

Adding the Drop Shadow:

  1. Reserve a minimum of two rows of transparent pixels on the right and bottom edges of your image.

  2. When your image is complete, select Add XP Drop Shadow from the Tools menu.

Related Topics

Developing icons for Windows XP

Image formats

Icon requirements


Texture Grid and Edit Modes

Microangelo Studio provides a selection of five editing modes and an optional Texture grid to enhance working with XP color depth (RGBA)images.

Texture Grid

The Texture Grid tool button toggles the background of the editing area between a solid background with a pixel grid, and a textured background grid of alternating squares. The colors of both backgrounds can be customized with the Transparency tab on Studio's Preferences dialog.

Composite image showing standard grid on left and texture grid on right.

Edit Modes

Edit modes allow you to view and edit the RGB and/or alpha transparency information. The default edit mode is View Blended/Edit All.

Choose an edit mode using the drop-down control on Studio's upper toolbar:

Edit Mode Selection

Tip

The Ctrl+1 through Ctrl+5 keyboard shortcuts can also be used to select an edit mode.

Comparing Edit Modes

The following table illustrates the differences between the five edit modes:

Mode |  | Ink Wells | Color Blend | Opacity Level
View | Edit
Blended | All | RGB color | Yes | Yes
Blended | Color | RGB color | Yes | No
Blended | Alpha | Opacity level | No | Yes
Color | Color | RGB color | Yes | No
Alpha | Alpha | Opacity level | No | Yes

Tip

Use View Blended/Edit All to lay the foundation of your image. The four other edit modes should usually be used for touching up small details or creative/unusual effects.


Opening and Importing

Opening an icon or cursor

There are several methods of opening icons and cursors in Studio.

Right-click on an icon or cursor file in an open folder or Windows Explorer. Select Open with Microangelo Studio 6 from the popup menu.

If Studio is already launched, select Open from Studio's File menu and navigate to the desired icon or cursor file.

Drag an icon or cursor file from an open folder or Windows Explorer window and drop it into Studio's main edit window.

To edit an icon inside a program file or icon library, open the file in Microangelo Librarian and double-click the icon you want to edit. (more information)

Importing image formats

Microangelo Studio imports images from the following file formats:

PSD (Photoshop)
PNG (Portable network graphics)
JPG/JPEG (Joint Photographic Experts Group)
BMP (Bitmap)

See Image Formats: New Image Format dialog for complete details on importing external graphics, resampling techniques, and more.

Related Topics

Image formats

Saving and exporting


Saving and Exporting

Saving an icon or cursor file

  • Select Save or Save As... from the File menu.

  • Use Save As... to save the file with a new name, or to convert an icon to a cursor or vice-versa.

  • Use the Save as type control to select Icon Resource (ICO) or Cursor Resource (CUR).

NOTE: Only 32x32 images are saved to a cursor resource (CUR).

Exporting images

To save individual images to PSD (Photoshop) or PNG graphic files.

  • Select the image to be saved into the active edit area.

  • Select Save As... from the File menu.

  • Use the Save as type control to select Photoshop or PNG.

Related Topics

Opening and importing


Using the clipboard

All of Microangelo's image editors provide enhanced clipboard support between each other. Microangelo editors can exchange full color and transparency information as well as irregular and non-contiguous areas.

The Windows clipboard does not offer a standard graphics format that supports images with transparency. Microangelo provides a bitmap format to the clipboard to support Pasting into other applications.

Standard Clipboard operations

Cut | Places the selected pixel information on the clipboard and fills the selection with transparency.
Copy | Places the selected pixel information on the clipboard.
Paste | Creates a new selection filled with pixel information from the clipboard.
Clear | Fills the selection with transparency.

Paste Special

Select Paste Special from the Edit menu to:

  • Choose between the Clipboard or a BMP file as the source of the Paste.

  • Paste (and scale) the source into the current selection.

Related Topics

Rectangular selection tool

Elliptical selection tool

Lasso (irregular) selection tool


Setting a cursor's Hot Spot

The hot spot of a cursor is the pixel location that Windows sends to a program as a user moves the cursor or clicks a mouse button. For example, the hot spot pixel of an arrow cursor would be the pixel location at the "point" of the arrow.

Click the Hot Spot tool button on Studio or Animator's toolbar to set the hot spot pixel for the cursor. The current hot spot pixel will flash in the edit window. Use the left mouse button to click the desired hot spot pixel for the cursor.

Tip

The Hot Spot tool is only available when editing cursor files. If the Hot Spot tool button is disabled (grayed), the file being edited is an icon file. To change the file to a cursor:

Studio: Select Save As from Studio's File menu. Set the Save as type control to Cursor Resource to save the file in cursor format.

Animator: Select Convert to new resource from Animators's Tool menu. Select the Cursor option and the desired color format.


Screen capture

Studio includes a screen capture feature to acquire graphic images directly from the display. The information is transferred directly to the Windows clipboard. From there it can be pasted into Studio, or any other graphics application that can paste pixel images from the clipboard.

To capture from the screen:

  1. Click on the Screen Capture tool button. The Screen Capture dialog appears.

  2. Select one of the three standard capture sizes, or select Drag Custom Area.

  3. Select OK. Studio will minimize its window and go into capture mode.

  4. For standard capture sizes, move the square capture rectangle over the desired area and click with the left mouse button. If Drag Custom Area was selected, press the left mouse button down over one corner of the desired area and drag to the opposite corner before releasing the mouse button.


Animator overview

Use Microangelo Animator to:

Create animated cursors for Windows.
Create animated icons for use with Microangelo On Display.
Developers: Create animated icons or cursors for your Windows applications.

Working with Animator

Microangelo Animator offers the same editing tools and features as Microangelo Studio. The following topics describe the program features and options unique to Animator and the animated images it creates.

Animation types, sizes, and colors
Frames and JIFs
Preview and Playback
Setting a cursor's Hot Spot


Animation types, sizes and colors

Microangelo Animator creates and edits animations in the ANI file format. Animated cursors can be used with all Microsoft Windows desktop platforms without any additional support. Microangelo On Display can display animated icons on all Windows desktops from Windows 95 through Windows XP.

Animated cursors

Sizes
Windows expects animated cursors to be 32x32 pixels in size and will resize animated system cursors to 32x32 if they are not. Animator enforces the 32x32 size when creating animated cursors.

Color formats
Animator can create and edit cursors in monocrhome (B/W), 16-color, 256-color, True Color and Windows XP color depths. Unlike static cursors that contain multiple images in different color depths, all "frames" in an animated cursor support one color depth only.

Hot Spot
Animated cursors have a "Hot Spot" that defines the pixel location used to identify where a user clicks the cursor. (see Setting a cursor's Hot Spot.)

Animated icons

To the best of our knowledge, animated icons can only be displayed on the Windows desktop using Microangelo On Display.

Sizes
Animated icons can be 32x32 or 48x48 pixels in size.

Color formats
Just as with cursors, Animator can create and edit icons in monocrhome (B/W), 16-color, 256-color, True Color and Windows XP color depths. Unlike static icons that contain multiple images in different color depths, all "frames" in an animated icon support one color depth only.


Frames and JIFs

Animator displays a list of all frames in an animation at the right side of the main window. The content and the duration is displayed for each frame.

Unlike movies that display frames at a constant rate, each frame in an animation includes the length of time that the frame is displayed. These durations are expressed in "jifs".

JIFs

We believe the term JIF was coined from the colloquial phrase, "In a JIF!" A JIF is equal to one-sixtieth (1/60) of a second. In reality, JIF values depend on the performance of the computer that displays the animations. You should not expect to display animations at 60 frames per second.
Frame list

Changing the duration of a single frame
The JIF value for the current edit frame is displayed in an edit control. Click inside the edit control to change the JIF value for the current frame.

TIP: The relative speed of the entire animation can be adjusted using the Speed control in the Preview window.

Adding new frames

Click the New Frame tool button above the list of existing frames to open the Insert New Frames dialog.

Removing frames

Click the Remove Frame tool button above the list of existing frames to remove the current frame.

Related Topics

Preview and Playback


Preview and playback

Animator's Preview window provides an actual size, real-time display of edit operations as you work. Real-time means the Preview window displays your editing operations "in progress" even as you hold a mouse button down to adjust a line, shape, text, or selection.

Play while you paint
Pause the preview playback to view editing in the current frame, or play the animation to view in-process edits as they will appear in the animation.

Play/Pause
 | Click the Play/Pause button to toggle playback mode.
Global Speed
 | Drag the Global Speed control slider to adjust the relative speed of the entire animation.

Related Topics

Frames and JIFs


Special topics for Windows Vista

The following links provide further information about Windows Vista icons, options, and design.

Developing icons for Windows Vista
Preliminary information and recommendations on the changes in icon style and design for Vista.

Icon sizing in Windows Vista
An explanation of the new, "fluid" icon sizing Vista offers to users and the new image formats you should include.

Image Compression
A description of the new PNG compression support for images, its benefits, and its liabilities.


Developing icons for Windows Vista

The following information is preliminary and will be updated as more details become available.

Vista icons

Icons in Microsoft® Windows Vista ™ visually represent programs, objects, actions, and concepts that help users to recognize and grasp meaning and purpose, identify places and items, and find their way through the UI with visual landmarks.

New in Microsoft Windows Vista

Windows Vista introduces a new style of iconography that brings a higher level of detail and sophistication to Windows-based imagery.

Windows Vista Aero-style icons differ from Windows XP-style icons in the following ways:

  • The style is more realistic than illustrative, but not quite photorealistic. Icons are symbolic images —they should look better than photorealistic!
  • Icons have a maximum size of 256 x 256, making them suitable for high-DPI displays. These high-resolution icons allow for high visual quality in list views with large icons. This maximum size isn ’t required for icons used solely for menus, toolbars, glyphs or small symbols, or the notification area.
  • Wherever practical, fixed document icons are replaced by thumbnails of the content, making documents easier to identify and find. Stacks and folders contain multiple thumbnails.
  • Icon overlays allow thumbnails to show the file ’s associated application, making it easy to distinguish file types and predict which application opens the file by default.
  • Toolbar icons have less detail and perspective to optimize for smaller sizes.

Why are these changes important?

Well-designed icons:

  • Improve the visual communication of your program.
  • Strongly impact users ’ overall impression of your program ’s visual design.
  • Give your program a quality appearance by enriching users ’ overall experience and showing refined fit and finish.
  • Improve usability by making programs, objects, and actions easier to identify and find.

Look and feel

To achieve the modern Windows Vista look, redesign your program ’s most prominent icons to use the Aero style. Be sure to redesign any icons displayed on the Start menu or Explorer (such as file type icons). Don ’t use any icons in Windows Vista-based programs from Windows 9x or earlier.

Aero-style icons have the following characteristics:

  • Style Realistic and symbolic; not photorealistic or illustrative.
  • Perspective Use isometric icons for program icons and objects with 3-D volume. Use flat icons for files, flat objects, and 16x16 icons.
  • Sizes Required sizes are 256x256, 32x32, and 16x16. Optional supported sizes are 128x128, 96x96, 48x48, and 24x24. Windows Vista-style icons scale smoothly between 256x256 and 32x32. The 256x256 icon size is required to support high-resolution monitors.
  • Color 32-bit color (24-bit color plus 8-bit alpha channel).
  • Format .ico file format.

Related Topics

Icon sizing in Windows Vista

Image Compression

Image Formats

Project Templates


Icon sizing in Windows Vista

All versions of Windows before Vista display icon images in a handful of predetermined sizes. The predominant image sizes used by these platforms are "Small" (16x16) and "Large" (32x32 or 48x48).

"Fluid" image sizing

Windows Vista offers users the choice of displaying icons at any size between 16x16 and 256x256. Every type of explorer view (desktop, folder, file save and open, etc...) can be customized by the user using a new, "fluid" sizing option that displays icons at any size, scaling available image sizes when necessary.

Support considerations

Windows Vista requires 256x256 images to display icons at optimium quality in all user scenarios. Windows platforms before Windows 2000 will not process icon resources that contain images larger than 72x72. It seems that if an application includes hi-res images to appear great under Windows Vista, its icons will only display properly under Windows 2000, XP, or Vista.

We are working to provide a solution in Microangelo Toolset that will allow developers to overcome this obstacle. Toolset customers who are interested in this capability, please click here to contact us for further information.

Related Topics

Icon sizes used in Windows

Developing icons for Windows Vista

Project Templates

Image Formats


Image Compression

Windows Vista introduces new support for compressed images in icon resources. Icon authors should view this feature as a target on their horizon. The following information explains how to determine when and when not to use image compression, and why.

When to use PNG compression

Using image compression depends on the Windows platforms that your application will support. Windows platforms before Windows 2000 cannot process icon resources that contain image sizes greater than 72x72. Windows 2000 and Windows XP will ignore sizes greater than 72x72. Therefore:

  • If your application must support Windows platforms before Windows 2000, do not include images greater than 72x72 pixels. In practice, these platforms only require 16x16, 32x32, and 48x48 image size.

  • If you intend to provide support for hi-res images used by Windows Vista, use PNG compression on all images greater than 48x48. Remember that doing so means that these icon resources will not display correctly on Windows platforms before Windows 2000.

More Information

All Windows platforms before Windows Vista have used uncompressed bitmaps in their icon resources. The small size of icon images, between 16x16 and 48x48 pixels, would benefit little from a compression strategy. Windows Vista expands the maximum icon size to 256x256 pixels - a great increase in image size. To reduce the impact these larger images have on storage and memory, Vista introduces a compression option for image formats based on the PNG (Portable Network Graphics) compression algorithm.

Benefits

The obvious benefit is that compressed images take up less computer resources - less disk space and less memory when they are cached or manipulated. The following comparison illustrates the size of the preliminary Vista icon resource for "My Computer" with and without PNG compression:

"My Computer" Vista icon resource:
Without PNG compression: | 411,494 bytes bytes
With PNG compression: | 127,676 bytes bytes

In the example above, using PNG compression reduces the overall size of the icon resource to less than one-third of the uncompressed resource.

Liabilities

Image formats larger than 72x72 are not recognized by Windows platforms earlier than Windows 2000. Windows 2000 and Windows XP will ignore these images, however platforms such as Windows 98 will refuse to process the icon and resource and will display a "generic" default image icon.

We are working to provide a solution in Microangelo Toolset that will allow developers to overcome this obstacle. Toolset customers who are interested in this capability, please click here to contact us for further information.

Related Topics

Icon sizing in Windows Vista

Developing icons for Windows Vista

Image Formats

Project Templates


Reference Information

The following links provide in-depth information about the topics they address.

Authoring Topics

Icon and cursor requirements

Icon sizes used by Windows (95 thru Vista)

How Windows chooses an image format

Developing icons for Windows XP

Developing icons for Windows Vista

Animated cursors (and icons)

Further topics

System requirements

Keyboard shorcuts

Sales, Service and Support


Authoring topics

The following links provide in-depth information about the topics they address.

Icon and cursor requirements
An explanation of the multiple images required in icons and cursors. Includes details on image sizes and color depths and examples for each.

Icon sizes used by Windows (95 thru Vista)
The various image sizes and where they are used in all Windows platforms beginning with Windows 95 through Windows Vista.

How Windows chooses an image format
Complete details on which image format Windows will choose when it displays an icon or cursor.

Developing icons for Windows XP
A description of style and colors, complete with step-by-step recommendations for creating the required image formats.

Developing icons for Windows Vista
Preliminary information and recommendations on the changes in icon style and design for Vista.

Animated cursors (and icons)
A description of the unique qualities and requirements of animated (ANI) resources.


Icon and cursor requirements

Most Windows icons and cursors contain more than one image format. Multiple images are required to support displaying the icon at different sizes and the color capabilities of different computers.

Color Depths

Some computers are able to display more colors than others, and some can also display semi-transparent colors. Semi-transparency is provided by an "Alpha-channel" that allows an icon or cursor to blend smoothly and cast shadows over any background. At present, the color depths used most frequently are:

  • 16-color (fixed palette of 16 Windows colors)

  • 256-color (fixed palette of 256 RGB colors)

  • True Color (RGB - 16 million colors)

  • Windows XP (RGBA - 16M colors and semi-transparency)
Hi-color

We use the term hi-color to refer to both the 256-color and True Color formats. Although Microsoft defines hi-color icon images as 256-color, all Windows platforms except NT4 support True Color (RGB) images. Microangelo provides the option of using 256-color or True Color image formats.

There are two rules to follow when providing multiple images with different color depths:

  1. Include either a 256-color image or a True Color image. Do not include both. Windows cannot tell the difference between the two and will use the first image it finds in the icon.
  2. Always include a hi-color image format when you include an XP image format. Older versions of Windows do not recognize the XP format. Microangelo saves the hi-color format before the XP format so that older platforms find it first.

Color depth example

To provide the best support for computers running Windows 95 through Windows XP, an icon or cursor should include three images in the following color depths:

16 color | Hi-color | Windows XP
X | X | X

Image sizes

All standard Windows cursors are 32x32 pixels in size. A cursor that supports the platforms and color depths in the example above would include the following image formats:

Size | 16 color | Hi-color | Windows XP
32x32 pixels | X | X | X

Icons are a bit more complicated than cursors. Multiple image sizes are required to support Windows "small" and "large" icon views. The small view displays 16x16 pixel images while the large view displays either 32x32 or 48x48 images.

Icons for one computer

A single computer can be supported by icons that contain only two images. (1) A 16x16 image and (2) either a 32x32 or a 48x48 image. For example, if you are running Windows XP with a high resolution display, your computer will probably be supported best by icons that contain a 16x16 and a 48x48 image in the Windows XP format. Microangelo makes it easy! Microangelo Studio recognizes the icon sizes and color depth supported by your computer and provides a special Project Template with the two image formats that provide the richest color support for your computer.

Icons for multiple computers

If you're developing icons for multiple computers, you'll need to provide more image formats to support the variety of Windows platforms and video configurations of different computers. For example, an icon that supports Windows 95 through Windows XP usually contains the following nine image formats:

Size | 16 color | Hi-color | Windows XP
16x16 pixels | X | X | X
32x32 pixels | X | X | X
48x48 pixels | X | X | X

Windows Vista

Windows Vista introduces hi-res icon images, 256x256 pixels in size. An icon that supports Windows 2000 through Windows Vista can typically contain twelve image formats:

Size | 16 color | Hi-color | Windows XP
16x16 pixels | X | X | X
32x32 pixels | X | X | X
48x48 pixels | X | X | X
256x256 pixels | X | X | X

Related Topics

Image formats

Project Templates


Icon sizes used by Windows

Definition of icons sizes (Win95 through WinXP)

Windows platforms use a variety of icon sizes. Their usage is mostly unchanged through Windows 95, 98, Me, 2000, and XP. Windows Vista introduces a new, "fluid", approach to icon sizes, allowing users to select custom icon sizes from 16x16 to 256x256 pixels.

Size | Values
Shell Large | User selected. Standard sizes are 32x32 and 48x48.
Shell Small | Size is 16x16 pixels as defined by Windows and cannot be changed.
System Large | Size is defined by the video driver, usually 32x32.
System Small | Size is derived from the size of window captions. The caption size can be adjusted from the Appearance tab in the Display Properties dialog.

Where they are used (Win95 through WinXP)

Size | Where Used
Shell Large | On the Desktop, and in Large Icon views of Explorer and open folders.
Shell Small | On the Start menu, and in Small Icon, List and Details views of Explorer and open folders.
System Large | In <ALT><TAB> dialog (also known as "Cool Switch").
System Small | Title bar (caption) of application windows.

Icon sizes in Windows® Vista™

Windows Vista introduces significant changes in the icon sizes it displays and the image sizes it requires for optimum results. The concepts of Small and Large, Shell and System have faded away. Vista allows used to customize their view of icons on the desktop and in folders to any size between 16x16 and 256x256 pixels. The only place that Vista appears to enforce a specific size is on the Start menu, where 32x32 pixel images are displayed.

Preliminary guidelines from Microsoft:
Current guidelines recommend 16x16, 32x32, and 256x256 image sizes. We encourage you to consider providing more image sizes for the best presentation of your icons.

Microangelo preliminary guidelines:

  1. We recommend including 48x48 image sizes, in addition to 16x16, 32x32 and 256x256 pixel images for the color depths that your icons support.

  2. Use Microangelo Studio's New Format option to test scaling your 256x256 images to 128x128, 96x96, and 72x72 using the bi-cubic Resample option. If you are pleased with the scaling results that Studio provides, there is no need to include these sizes in your icon. You should include any sizes only if you further tweak and tune each new image to improve its display.

Related Topics

Project Templates

Image Formats

Developing icons for Windows XP

Developing icons for Windows Vista


How Windows chooses an image format

Windows and its applications display different size icons under a variety of conditions. When multiple images are present in an icon or cursor, the following selection rules are applied:

  1. The image closest to the desired size is chosen.

  2. If two or more images of that size are present, the one that matches the current icon color depth is selected.

  3. If none match the color depth exactly, Windows chooses the image with the greatest color depth without exceeding the system icon color depth.

  4. If all the size-matched images exceed the icon color depth, the one with the lowest color depth is chosen.

  5. Windows treats all images of 256 or more colors as equal. For example, it is useless to have a 32x32 256-color image and a 32x32 True Color image in the same resource-Windows will simply choose the first one it encounters.

  6. When the video display mode is set to 256 colors, Windows will prefer a 16-color icon to a 256-color icon, and will display all icons using the system default palette.

Related Topics

Icon sizes used by Windows (95 thru Vista)

Icon Requirements

Image formats

Project Templates


Developing icons for Windows XP

Windows XP introduced the first new style in icon design since Windows 95. The XP icon is all about fun, color, and energy. The newer, 32-bit versions of the icons provide smooth edges over any background.

The following guidelines walk you through the steps of designing and creating Windows XP-style icons. These guidelines contain complete information for professional designers that will benefit authors of all levels of experience. If you are a professional developer, consider working together with a good graphic designer.

Windows XP icon development

Overview | An informative overview of icon design. Learn the latest design guides covering icon styles, sizes, color depth and palettes, angles and grouping, drop shadows and more.
Step 1 | Conceptualize. Important design considerations to review before creating Windows icons. Includes examples of many common icons used in the latest Windows platforms and applications.
Step 2 | Illustrate. Use Microangelo Studio alone or together with other graphic design tools to create your Windows XP images first.
Step 3 | Add the drop shadow. Microangelo Studio makes it easy!
Step 4 | Create the 8-bit and 4-bit images. Procedures and tips you can use to create the images required by Windows platforms before Windows XP.


Animated cursors (and icons)

Animated cursors and icons share many similarities with their static counterparts. That's because ANI files are created from a collection of static icon or cursor images - the same image formats that can be found in ICO and CUR files. In fact, because ANI files use icon and cursor image formats, there is only one additional consideration to make when authoring and distributing animated icons and cursors.

One image format per file

Unlike ICO and CUR files, ANI resource files only contain a single image format. All frames of the animation must be the same size and color depth. Therefore, a single ANI file cannot extend support for all Windows configurations.

You should consider your target audience when you create animated cursors or icons and provide multiple ANI files if required.

Animated Cursors

Since all cursors are 32x32 pixels in size, the only consideration you need to make is what color depth(s) you will create. For example, the original Windows Plus! package includes animated cursors in both 16 and 256 color formats such as "My Icon.ani" and "My Icon (hi-color).ani".

Animated Icons

In general, Windows does not support animated icons. Animated icons require a program specifically created to display ANI file animations. Microangelo On Display is capable of displaying animated icons on Windows desktops from Windows 95 through Windows XP. (Windows Vista will remove the mechanism that previous versions of Windows offered to allow this feature of On Display.)


Keyboard shortcuts

Microangelo Librarian

Keystroke | Action
DEL | Delete the selected icon(s).
F2 | Rename the selected icon.
F5 | Refresh/arrange the workplace display.
ENTER | Edit the selected icon.
CTRL + A | Select all.
CTRL + O | Open a file.
CTRL + S | Save to disk.
ALT + ENTER | View properties of current file if no icons are selected, or view properties of selected icon if a single icon is selected.
ALT + N | Open a new Librarian window.
ALT + X | Launch Microangelo Explorer.
ALT + F4 | Exit.

Microangelo Studio

Keystroke | Action
DEL | Clear. (Fill selection with Color B).
SHIFT + DEL | Cut.
SHIFT + INSERT | Paste.
CTRL + INSERT | Copy.
CTRL + C | Copy.
CTRL + X | Cut.
CTRL + V | Paste.
CTRL + A | Select all.
CTRL + O | Open a file.
CTRL + S | Save to disk.
CTRL + Y | Redo.
CTRL + Z | Undo.
ALT + BACKSPACE | Undo.
CTRL + I | New image format.
ALT + R | Remove image format.
CTL + 1 | View Blended/Edit All.
CTL + 2 | View Blended/Edit Color.
CTL + 3 | View Blended/Edit Alpha.
CTL + 4 | View Color/Edit Color.
CTL + 5 | View Alpha/Edit Alpha.
ALT + P | Palette window menu.
ALT + A | Update Librarian and Exit (when editing for Librarian).
ALT + ENTER | View properties of current image format.
ALT + N | Open a new Studio window.
ALT + X | Launch Microangelo Explorer.
ALT + F4 | Exit.

Microangelo Animator

Keystroke | Action
SPACE | Stop/start preview animation.
DEL | Clear. (Fill selection with Color B).
SHIFT + DEL | Cut.
SHIFT + INSERT | Paste.
CTRL + INSERT | Copy.
CTRL + C | Copy.
CTRL + X | Cut.
CTRL + V | Paste.
CTRL + A | Select all.
CTRL + O | Open a file.
CTRL + S | Save to disk.
CTRL + Y | Redo.
CTRL + Z | Undo.
ALT + BACKSPACE | Undo.
CTRL + I | New frame.
ALT + R | Remove frame.
ALT + P | Palette window menu.
ALT + ENTER | View properties of current frame.
ALT + N | Open a new Animator window.
ALT + X | Launch Microangelo Explorer.
ALT + F4 | Exit.


System requirements

Software

Microangelo Toolset 6 supports all Windows desktop platforms beginning with Windows 98 through Windows Vista.

Hardware

A monitor and video card capable of a minimum of 65K colors (16-bit) and 1024x768 display. Color depth of 32-bit and 1280x1024 resolution recommended.
CPU: Pentium 4 or higher.
256 MB RAM
10 MB free disk space


Contact Eclipsit

Product Sales, Service and Support
Microangelo Web Site http://www.microangelo.us
Product Sales
Online: Email: Phone: | Purchase and immediate download info@eclipsit.com 800/777.7687 (sales only) 949/305.1487
Customer Service
Email: Phone: | service@eclipsit.com 949/305.1487
Technical Support
Email: Phone: | support@eclipsit.com 909/590.0500 (Phone support is limited to 9AM-12PM Pacific time on Monday, Wednesday and Friday.)
Fax 949/215.2917
Mail Eclipsit Corporation P.O. Box 4527 Laguna Beach, CA 92652-4527 USA


Color A & B usage

Studio and Animator display the current Color A and B choices to the upper left of the editing area directly above the tool palette. Select the desired A and B colors by clicking the left or right mouse button in the Palette window over the inkwell containing the desired color.

The following table lists the usage of Color A and Color B when editing an image in Studio or Animator.

Operation | Color usage
Draw/Paint | Left mouse button provides Color A, right button Color B.
Color Eraser | Left mouse button changes Color A to Color B, right button B to A.
Draw Text | Text is drawn using Color A on a background of Color B. If configured, text can be drawn without a background over existing artwork. (see Color B in Selection).
Edit Cut | Color B fills the area exposed by cut.
Edit Paste | Color B can be used as a mask when pasting over existing artwork. If configured, Color B pixels in the image being pasted act transparent until the paste is completed. (see Color B in Selection).
Drag Selection | If configured, Color B pixels in the Selection Frame act transparent when dragged. (see Color B in Selection).

Related Topics

Colors and palettes


Color B in Selection

Studio and Animator offer the option to ignore Color B, as if it were transparent, when pasting or moving selections.

Color B in Selection is accessed from the Select menu.
This option is NOT related to transparent areas of images in any way. It only affects pixels inside the selection frame during a paste or move operation.
When set to Color B is Transparent, this option allows irregularly shaped images to be floated over existing artwork in the image by "ignoring"pixels that match Color B. Choose Color B is Transparent to paste or relocate a selection over existing artwork. Any areas inside the Selection Frame that match Color B will allow the pixels below to show through until the operation is complete.
Choose Color B is Opaque to paste solid areas or create text with a background color.

Related Topics

Color A and B usage


Creating Icons Overview

Developing icons for Windows XP

Overview

This section will familiarize you with the Windows XP style of icon design in preparation for creating your own icons.

Figure 1. Icon samples

Icon Style Characteristics

  1. Color is rich and complementary to the Windows XP look.
  2. Angle and perspective provide a dynamic energy to the images.
  3. Edges and corners of elements are soft and slightly rounded.
  4. Light source is coming from the upper left-hand corner with additional ambient light illuminating other parts of the icon.
  5. The use of gradients provides dimension and gives the icon a richer look.
  6. A drop shadow provides contrast and dimension.
  7. Outlines provide definition.
  8. Everyday objects, such as computers and devices, have a more modern consumer look.

Icon Sizes

There are four sizes of Windows icons—48 × 48, 32 × 32, 24 × 24, and 16 × 16 pixels.

Microsoft recommends that your icon contains these three sizes:

  • 48 × 48 pixels
  • 32 × 32 pixels
  • 16 × 16 pixels

Figure 2. General icon sizes

Icons on the right side of the Start menu are displayed at the 24 × 24 pixels size. This is not a size that you need to provide.

Figure 3. The 24 × 24 size in the Start menu

If you are creating icons for a toolbar, the Windows standard sizes are 24 × 24 and 16 × 16 pixels.

Figure 4. The standard toolbar icon sizes

Icon Color Depth Support

Windows XP supports 32-bit icons, which are 24-bit images with an 8-bit alpha channel. This allows icons to display with smooth edges that appear to blend into any background.

Each Windows XP icon should contain these three color depths to support different monitor display settings:
  • 24-bit with 8-bit alpha (32-bit)
  • 8-bit (256 colors) with 1-bit transparency
  • 4-bit (16 colors) with 1-bit transparency

Figure 5. 32-bit, 8-bit, and 4-bit versions of the My Pictures icon

Color Palette

The following color table illustrates the primary colors used in Windows XP icons. These colors are provided in the first three rows of the mswinxp.pal palette file included with Microangelo.

Figure 6. Windows XP icon color palette

Angle and Grouping of Objects

This is the perspective grid that Windows XP style icons use:

Figure 7. Windows XP icon perspective

Not all objects work well at 16 × 16 at an angle. The following objects are usually shown in a straight-on manner:
  • Document icons
  • Icons that are symbols (such as warning or information icons)
  • Icons that are single objects (such as the magnifying glass)

Figure 8. Straight-on icon examples
(.Jpg Document, Search, and Favorites icons)

Create overlapping secondary objects at an angle unless it makes more sense, due to readability and integrity, that they are rendered straight on. Consider also how your icons may be viewed as a set to help determine how to group objects.

Figure 9. Overlapping examples
(Add or Remove Programs, Print Pictures, Recent Documents)

Drop Shadow

Windows XP icons use a drop shadow to provide definition and added dimension. This effect is easily added in Studio using the Tools -> Windows XP Effects menu. Select Drop Shadow to instantly create a drop shadow effect precisely to Microsoft's XP icon specifications.

Figure 10. Before and after a drop-shadow is added to an icon

Outlines

When illustrating XP-style icons, add an outline to the image to provide definition and ensure that the image works well on different background colors.


Creating Icons Step 1

Developing icons for Windows XP

Step 1: Conceptualize

When designing new icons, consider grabbing pen and paper and sketching your ideas out.

Here's an example of an initial sketch for the Windows XP My Pictures icon:

Figure 11. Sketch of My Pictures icon

Considerations when designing icons:

  • Use established concepts where possible to ensure consistency of meanings for the user.
  • Consider how the icon will appear in the context of your user interface and how it might work as part of a set of icons.
  • Consider the cultural impact of your graphics. Avoid using letters, words, hands, or faces in icons. When you must represent people or users, depict them as generically as possible.
  • If combining multiple objects into one image in an icon, consider how the image will scale to smaller sizes. Consider using no more than three objects in an icon. For the 16 × 16 size, you can also consider removing objects or simplifying the image to improve recognition.

    Note Use the following guidelines on the use of the Windows flag in icons:

    • To support trademark and Windows branding guidelines, do not use the Windows flag in icons, with the exception of the Windows Update icon.
    • The Windows flag should only be used in icons that ship as part of the Microsoft® Windows® operating system.
    • The Microsoft branding team should review any usage of the Windows flag in an icon.

Common Icons

Figure 12. Common icons for Windows XP

Common Toolbar Icons

Figure 13. Common toolbar icons for Windows XP


Creating Icons Step 2

Developing icons for Windows XP

Step 2: Illustrate

Microangelo Studio provides a broad range of drawing tools, as well as gradient and anti-aliasing effects to create high-quality images. Authors who require more powerful graphic design features should consider using a vector tool such as Macromedia FreeHand or Adobe Illustrator to create vector graphics and Adobe Photoshop to convert these images into raster graphics of the desired size. Microangelo will accept the Photoshop images directly from PSD files.

Create three sizes of the image. Because there will be a two-pixel drop shadow added to the image later, you should follow these guidelines:

Microangelo: Create Windows XP image formats in the sizes of 48x48, 32x32, and 16x16. Leave the bottom two rows and right two coloumns of pixels empty (transparent).

Photoshop: Create sizes of 46×46, 30×30, and 14×14 pixels.

Use the palette and style characteristics outlined earlier in the Preparation section.

    Note Photoshop is the recommended image creation tool because Microangelo Studio offers a direct import of Photoshop files. Any image created in Photoshop that uses the "RGB" mode has an alpha channel attached. If there is transparency in the image or layer, the alpha channel includes transparency information that Studio processes into the Windows XP image format.


Developing icons for Windows XP

Step 3: Add the Drop Shadow

Microangelo Studio makes this a snap. Simply select Add XP Drop Shadow from Microangelo's Tools menu. It's THAT easy!


Creating_Icons_Step_4

Developing icons for Windows XP

Step 4: Creating the 8-Bit and 4-Bit Images

Creating the 8-Bit Images: Now that you have the 32-bit images ready, you need to create 8-bit versions. The 8-bit icons will be displayed in any color mode lower than 32-bit.

The 8-bit versions will not have the 8-bit alpha channel so they will need to have their edges cleaned up as there's no antialiasing (that is, their edges will be jagged).

Select each XP image format in Studio, performing the following steps for each image:

  1. Click the New Image Format tool button.
  2. Use the New Image Format dialog to create a 256 color version of the same size as the XP image. Be sure to select the checkbox, "Begin New Image using Current Image".
  3. Clean up the edges with solid colors, removing any antialiased pixels. Use consistent stair-stepping to make your jagged edges less pronounced.
  4. Check your image on a light background such as white to see how the image looks.

Figure 17. Cleaning up your images for 8-bit color depth

Creating the 4-Bit Images: If you want your icons to look good down-level, provide 16-color versions of your icon.

Select each XP image format in Studio, performing the following steps for each image:

  1. Click the New Image Format tool button.
  2. Use the New Image Format dialog to create a 16 color version of the same size as the XP image. Be sure to select the checkbox, "Begin New Image using Current Image".
  3. Clean up your images using colors from the 16-color palette.
  4. Use a black outline on the bottom and right edges of the image.
  5. Use a dark gray or other dark color outline for the left and top edges of the image.

Figure 18. Example of 4-bit icons


Pencil tool

Flood tool

Select the Flood tool to completly replace an area of one color with another.

Painting:

Click the left or right mouse button over a pixel to fill that pixel and all adjacent pixels with the a new color. Use the left mouse button to apply the foreground color or click the right mouse button to apply the background color.


Define Gradient dialog

The Gradient dialog is the core of one of Microangelo's most powerful drawing tools. It can be used to Load a pre-defined gradient, or tailor a new gradient, or Save a gradient configuration.

  • Click the Load button to load a gradient configuration from disk.
  • Click the Save button to save a gradient configuration to disk.
Defining a new gradient:
The controls inside the Current Gradient group box are used to configure the color and transparency settings for the gradient. Tab stops display the anchor points of color and transparency values. A small diamond displays the midpoint between the selected tab stop and the next tab setting.

Color Settings
  • Click on a color tab to select it, or click in an empty area to create a new color stop.
  • Use the drop down control to select Foreground, Background, or Fixed type of stop. Foreground and background stops use the current foreground and background colors. Fixed stops use a pre-determined RGB value.
  • Click the square button to the right to select the color for a Fixed color stop.
  • Click and drag the stop to adjust the location of the color anchor.
  • Click and drag the midpoint to adjust the blend rate with the adjacent color stop.
  • Select Delete to remove the selected color stop from the gradient.
Transparency Settings
The transparency stops above the gradient display are configured similarly to color stops.

Click on a transparency tab stop to select it, or click in an empty area to add a new stop. The controls below will now display the Opacity level of the selected stop.

Select OK to accept the current settings or select Cancel to discard any changes.


Program File Access modes

Librarian prompts for the desired access mode when opening a program file:

  • Read only (updates not allowed)
  • Open for update

Update options

Select either the Basic or Advanced option when updating program files.

Basic Mode
This mode can be used on all program files. Librarian replaces the old image data with the new image in the exact same location. Although this method can be used on all program files, it has the following limitations:

  1. New image formats cannot be added.

  2. Existing image formats cannot be removed.

  3. When using Librarian's Replace option, the new icon must contain all of the image formats of the icon it is replacing.

Advanced Mode
This is the most powerful access mode. Librarian will completely re-build the icon resources of the program file. This allows adding new image formats or removing existing image formats of the program's icons. For example, Librarian can add hi-res, PNG compressed (Vista) images to existing programs.

Advanced mode has the following limitations:

  1. It requires Windows 2000, XP, or Vista. It is not available when running under Windows 98 or ME.

  2. Although Advanced mode can be used on all standard Windows program files, some non-standard (proprietary) file formats cannot be re-built successfully. This includes program files produced by Macromedia authoring tools.

Create backup file: Librarian will always offer the option to create a backup file in Advanced update mode. Select the backup option to safely test rebuilding resources in Advanced mode before saving a program file.


Preferences: General

The format that Studio uses to display RGB information and the action the Undo Pencil command performs can be changed using the program Preferences dialog.

Setting General Preferences:

  1. Select Preferences... from Studio’s File menu..

  2. Select the General tab.

  3. Select your choices in the Undo Pencil Action and RGB Status areas.

  4. Click OK.

Related Topics

Transparency Preferences

Message Alert Preferences


Preferences: Message Alerts

Some of the warning messages displayed by Studio can be toggled on or off using the program Preferences dialog.

Setting Message Alert Preferences:

  1. Select Preferences... from Studio’s File menu..

  2. Select the Message Alerts tab.

  3. Use the checkboxes to toggle the display of messages to your preference.

  4. Click OK.

Related Topics

Transparency Preferences

General Preferences


Preferences: Transparency

The manner that Studio displays transparent areas in the main edit area and the Preview window can be customized using the program Preferences dialog.

Setting Transparency Preferences:

  1. Select Preferences... from Studio’s File menu..

  2. Select the Transparency tab.

  3. Click inside the Background Color rectangle to change the color that Studio displays underneath transparent pixels.

  4. Use the Grid size and Grid colors controls to define the background texture grid that Studio makes available when editing Windows XP images.

  5. Click OK.

Related Topics

General Preferences

Message Alert Preferences


Toolset 6 Release History
The following information is presented in reverse chronological order beginning with the most recent release.

Version 6.0.2 (June 23, 2006)
Most of the changes and corrections listed below were the result of feedback from our users, who told us what they liked in Toolset 6 and also what they didn't like. If you have feedback on these or any other aspects of Toolset, please let us know!
New features and changes
- Relocated the Anti-alias and Opacity controls from the toolbar to a new Paint tab on the Paint Modifers tool window.
- Anti-alias and Opacity are no longer tracked on a per-tool basis. Their settings will remain the same when a different paint tool is selected.
- The Define Gradient dialog is now accessed by clicking the new Define Gradient button, located on the Paint tab of the Paint Modifers tool window. This button also displays the current gradient as it will be painted, including the current Opacity level when editing XP images.
- Major changes were made to the drawing of lines using the Anti-alias option. (Studio and Animator) New tables and computations are used to construct well-balanced, "one pixel" lines for the specific color and angle of the line.
- Changed the Eyedropper tool to pick up the alpha (transparency) as well as the RGB values when editing XP images. This is consistent with previous versions. Also added an option to only pick up RGB when the CTRL key is pressed (the Opacity control level remains unchanged).
- Librarian no longer separates image formats based on PNG compression. For example, you can now view all 256x256 images in Specific viewing mode whether the images are compressed or not. Librarian will indicate "PNG" for image formats that are stored with compression.
- Added Process Duplicate Icons feature to Librarian. All icons in the current workspace are examined and compared. Librarian will offer the option to Remove or Select the duplicate icons it locates. (Processing Duplicate Icons)

Corrections
- Corrected problems that occurred when an icon was dragged and dropped from Librarian to Librarian using the right mouse button.
- When "New Icon (Studio)" is selected from Librarian, Studio now displays the New Image Format dialog to begin the new icon.

Version 6.0.1 (May 15, 2006)
New features and changes
- Added new Select menu to Studio and Animator offering "All", "Deselect", "Reselect", and "Inverse" options. (Using selections)
- The Text tool now creates a selection while building text graphics. The selection can be "reselected" with the new Select menu option and used to create other text effects (such as Gradient filled text). (Text tool)
- To streamline creating new icon image formats, right-clicking an image format in Studio now provides options to create the next (lower) color depth and the next (smaller) size images. The choices are provided using the current Project Template. Choosing either selection will initialize the New Image Format dialog with the selected source and target images. (Image Formats)
- Changed Studio's file Open and Save dialogs to always initialize the file type to the type of resource being edited (ICO or CUR).
- Studio will now allow an icon or cursor to be saved with "blank" images. The user is informed and prompted to cancel or continue with the save operation.

Corrections
- Pasted selections can now be nudged, flipped or rotated before committing the paste operation.
- Filled ellipses created with the anti alias option will now anti-alias the inner edge (previously, only the outer edge was anti aliased).
- Corrected problem that did not allow painting of anti-aliased lines with Opacity set to zero percent (transparent).
- Corrected bad behavior where the current selection was cleared if the Delete key was pressed while using the Define Gradient dialog.
- Corrected crash in Studio when the Flood tool was clicked in an area that was already filled with the color as the paint color, but a different opacity. (XP image formats.)


Paint toolbox

The Paint toolbox

Toolbox "Flyout" menus: The arrow at the top right of a toolbox button indicates more tool selections. Press and hold the left mouse button on these tool buttons to access more selections.

Selection tools

Selection tools are used for Cut, Copy and Paste operations, painting with the Gradient tool, and can also be used to fill an area with color or transparency. See Using Selections for more information.
Rectangular Select
  • Adds or removes a rectangular area when building a selection.
Elliptical Select
  • Adds or removes an elliptical area when building a selection. The elliptical and rectangular selection tools are chosen with a "flyout" menu.
Lasso Select
  • Adds or removes an irregular area when building a selection.

Painting tools
Pencil
  • Paints individual pixels.
Line
  • Draws a straight line.
Brush
  • Paints pixels using the selected brush size and shape.
Flood
  • Fills an area with color.
Gradient
  • A very powerful painting tool, used to create simple or complex transitional blending from color to color, as well as transparent to opaque.
Color Eraser
  • Replace one color with another. (Color A with Color B or vice-versa)
Shape
  • Use the flyout menu to select a rectangular or elliptical shape tool to create outlined, solid, or filled shapes.
Text
  • Displays a popup control to enter text, change font, size and attributes.

Color/Palette tools
Eyedropper
  • Selects a new foreground or background color from existing pixels.
Color locator
  • Used to locate a specific color in the edit area and color palette.

Related Topics

Anti-alias and Opacity options

Using Selections

Filling a selection

Dodge and Burn

Two-color dithering

Nudge, Flip, and Rotate


Using Selections

Selections are used for familiar clipboard operations and to direct some painting functions.

Select menu options
All | Selects the entire image.
Deselect | Deactivates the current selection. In progress Move, Paste or Text operations are completed.
Reselect | Reactivates the most recent selection for the image format being edited.
Inverse | Inverts the current selection.

Filling with color or gradient
Filling a
selection 		Select Fill from the Edit menu to fill a selection with Color A or Color B.
Gradients | The current selection defines the bounding area where color will be applied when painting with the Gradient tool.

Clipboard operations
Cut, Copy,
Paste and Clear 		Choose any of these options from the Edit menu to perform the operation on the current selection.

Related Topics

Using the clipboard

Gradient tool

Filling a selection


Transparent and Inverse colors

Transparent and Inverse effects

Transparent Ink

When an icon is displayed, pixels in an image filled with transparent ink will display the colors of the pixels underneath. Pixels in inverse ink will appear in different colors than the pixels underneath them. The color displayed is dependent on the color of the pixel underneath. The edit tools can draw and paint with these inks the same as with any normal color.

Select transparent ink by clicking over the inkwell with a blue computer screen in the Palette window.
Select inverse ink by clicking over the inkwell with a pink computer screen in the Palette window.

Inverse Ink

Although this feature is referred to as inverse, the colors that it produces when an icon is displayed over a background are not necessarily opposites by any definition. Windows is dependent on the video mode of the installation when it creates an inverse effect. If the video mode uses a color palette (16 color or 256 color modes), the 'inverse' color that is displayed must exist in the current color palette. In this case Windows chooses the color to display based on the location of the colors in the palette. For example, in 256 color mode the 'inverse' of the color in the first position of the color palette is the color that appears in the last position of the color palette. The inverse of the second color is the color located in the 'last minus one', and so on.

The inverse ink option is not available in Windows XP images.